import React, { useState, useEffect } from 'react';
import { useAlita } from 'redux-alita';
import { Button } from 'antd';
import style from './index.module.less';
import service1 from '@/style/imgs/homePage/us-premium-editing.svg';
import service2 from '@/style/imgs/homePage/us-advance-editing (1).svg';
import service3 from '@/style/imgs/homePage/us-scientific-editing.svg';
import service4 from '@/style/imgs/homePage/us-premium-editing.svg';
import service5 from '@/style/imgs/homePage/scientific-editing-pro.svg';

const WeServe = () => {
    const [chartIsshow, setChartIsshow] = useAlita({ chartIsshow: false }, { light: true });

    const [serveList, setServeList] = useState<any>([
        {
            img: service1,
            title: '评估稿件',
            title2: '从真实专业、逻辑结构等角度，评估稿件资质',
            desc: [
                '评估稿件资质',
                '确保文稿质量',
                'SCI论文要求高、难度大，在提供润色服务前，我们需要评估稿件质量，确保文稿具备基本的逻辑结构与科研价值',
            ],
        },
        {
            img: service2,
            title: '多轮查重',
            title2: '按期刊要求，优化文稿重复率',
            desc: [
                '中英文多轮查重',
                '规避低级错误退稿',
                '对中文原稿进行一轮查重，评估稿件质量，按照部分专业期刊的要求，进一步优化文稿重复率',
            ],
        },
        {
            img: service3,
            title: '构建个性文稿',
            title2: '全方位打造文稿的“个人风格”',
            desc: [
                '查找错漏、规范语法',
                '矫正结构、严合逻辑',
                '打造文稿的“个人风格”',
                '优秀的期刊、资深的审稿人员，每天都要预览几十上百篇稿件，因此，独特的文稿更能让他们眼前一亮！我们将按照标准，对稿件进行系统润色，遵循读者个人意愿，贴合期刊稿件分格，润色后形成文稿的“个人特色”',
            ],
        },
        {
            img: service4,
            title: '深度母语润色',
            title2: '医学英文母语编辑，再次精修内容',
            desc: [
                '精修细节',
                '优化内容',
                '贴合标准',
                '专业医学领域的英文母语编辑，将精修细节、优化内容，按照标准，在确保语言表达精炼、准确的前提下，全方位贴合期刊审稿习惯，提高投稿成功率',
            ],
        },
        {
            img: service5,
            title: '全方位一对一服务',
            title2: '提供全天、全方位一对一服务，及时响应客户需求',
            desc: [
                '紧盯文稿润色动态',
                '及时反馈作者需求',
                '搭建良性高效的沟通桥梁',
                '平衡编辑团队与作者的时间差',
                '我们将为每位用户，提供人工“小管家”全方位、一对一服务，将更大效率地节省您的时间，更好地提高文稿质量。',
            ],
        },
    ]);

    const handleToChart = () => {
        setChartIsshow('chartIsshow', true);
    };
    return (
        <div className={`${style.serve_body}`}>
            <div className={style.serve_banner}>
                <div className={`h2 ${style.serve_title}`}>“定制化” 服务流程</div>
                <div className={`h3 ${style.h3}`}>高标准、全方位、“领跑者”</div>
                <div className={style.serve_list}>
                    {serveList.map((item: any, index: number) => (
                        <div key={index} className={style.serve_item}>
                            <div className={style.serve_header}>
                                <img
                                    src={item.img}
                                    alt="图片加载失败"
                                    className={style.serve_img}
                                />
                                <div className={`h3 strong ${style.h3}`}>{item.title}</div>
                            </div>
                            <div className={style.desc_title2}>{item.title2}</div>
                            <div className={style.desc_body}>
                                {item.desc.map((items: any, indexs: number) => (
                                    <div
                                        key={indexs}
                                        className={`${style.desc_item} ${
                                            indexs !== item.desc.length - 1
                                                ? style['red' + index]
                                                : ''
                                        }`}
                                    >
                                        {items}
                                    </div>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
                <div className="block_footer">
                    <Button type="primary" onClick={handleToChart}>
                        立即询价
                    </Button>
                </div>
            </div>
        </div>
    );
};

export default WeServe;
